<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/three.js"></script>
    <script src="../libs/OrbitControls.js"></script>
    <script src="../libs/OBJLoader.js"></script>
</head>
<body>
    
    <script>
         // 创建一个场景
        var scene = new THREE.Scene();
        // 创建一个具有透视效果的摄像机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        // 创建一个渲染器
        var renderer = new THREE.WebGLRenderer();
        // 设置渲染器的大小
        renderer.setSize(window.innerWidth, window.innerHeight);
        let controls = new THREE.OrbitControls(camera,renderer.domElement)
        // 将渲染器添加到DOM中
        document.body.appendChild(renderer.domElement);
        var loader = new THREE.OBJLoader();
        loader.crossOrigin = 'anonymous'
        loader.load(
            'https://wz-tupian.oss-cn-beijing.aliyuncs.com/080-%E9%87%91%E5%B1%B1%E9%86%89%E6%A3%A0%E8%8B%9119%23/%E5%AE%B6%E5%B1%85%E8%A3%85%E9%A5%B02-80-max3.3dcool.net.obj',
            function (object) {
                console.log('加载成功')
                object.scale.set(0.01, 0.01, 0.01); 
                scene.add(object);
            },
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            function (error) {
                console.error('An error happened', error);
            }
        );
        var light = new THREE.PointLight(0xffffff, 1, 1000);
        light.position.set(0, 0, 10);
        scene.add(light);
        camera.position.z = 5;
         // 创建一个渲染循环
        function animate() {
            controls.update()
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>